import React, { useMemo } from 'react'
import classNames from 'classnames'
import {
  RiCheckDoubleLine,
  RiCloseLine,
  RiErrorWarningLine,
  RiLoader5Line,
} from '@remixicon/react'
import { Mask } from '../Mask'
import { AutoCenter } from '../AutoCenter'
import type { ToastProps } from './type'

const classPrefix = 'rt-toast'

export const InternalToast: React.FC<ToastProps> = (props) => {
  const {
    afterClose,
    content,
    icon,
    getContainer,
    maskClickable = false,
    maskClassName,
    maskStyle,
    position = 'center',
    visible,
  } = props

  const iconElement = useMemo(() => {
    if (icon === null || icon === undefined) return null
    switch (icon) {
    case 'success':
      return <RiCheckDoubleLine className={`${classPrefix}-icon-success`} />
    case 'fail':
      return <RiCloseLine className={`${classPrefix}-icon-fail`} />
    case 'warning':
      return <RiErrorWarningLine className={`${classPrefix}-icon-warning`} />
    case 'loading':
      return <RiLoader5Line className={`${classPrefix}-loading`} />
    default:
      return icon
    }
  }, [icon])

  const top = useMemo(() => {
    switch (position) {
    case 'top':
      return '20%'
    case 'bottom':
      return '80%'
    case 'center':
      return '50%'
    default:
      return '50%'
    }
  }, [position])

  return (
    <Mask
      afterClose={afterClose}
      className={classNames(
        `${classPrefix}-mask`,
        maskClassName,
      )}
      destroyOnClose
      disableBodyScroll={!maskClickable}
      getContainer={getContainer}
      opacity={0}
      style={{
        pointerEvents: maskClickable ? 'none' : 'auto',
        ...maskStyle,
      }}
      visible={visible}
    >
      <div className={classNames(`${classPrefix}-wrap`)}>
        <div
          style={{ top }}
          className={classNames(
            `${classPrefix}-main`,
            icon ? `${classPrefix}-main-icon` : `${classPrefix}-main-text`,
          )}
        >
          {iconElement && (
            <div className={`${classPrefix}-icon`}>{iconElement}</div>
          )}
          <AutoCenter>{content}</AutoCenter>
        </div>
      </div>
    </Mask>
  )
}
